<template>
    <view class="option-container">
        <view class="item">
            <picker @change="handleConfirm" :value="columnsIndex" :range="columns" range-key="label">
                <wd-icon name="internet" size="34rpx"></wd-icon>
            </picker>
        </view>
        <view class="item" @click="openService">
            <wd-icon name="service" size="34rpx" color="#323233"></wd-icon>
        </view>
    </view>

    <uni-popup ref="serviceRef">
        <Service @onClose="onClose" />
    </uni-popup>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import Service from '@/components/Service/index';
import { setStorage } from '@/utils/common';
import { useMemberStore } from '@/stores/modules/member';
import { useI18n } from 'vue-i18n';

const { locale } = useI18n();
const serviceRef = ref(null) as any;
const memberStore = useMemberStore();
const columnsIndex = ref<number>(1);
const columns = ref<iColumns[]>([
    {
        label: '日本語',
        value: 'ja' // 日语标准代码
    },
    {
        label: 'English',
        value: 'en' // 英语标准代码（原配置正确）
    },
    {
        label: '繁體',
        value: 'zh-TW' // 繁体中文（中国台湾地区）标准代码，若需通用繁体可设为'zh-Hant'
    },
    // {
    //     label: '한국어',
    //     value: 'ko' // 韩语标准代码
    // },
    // {
    //     label: 'Pусский язык',
    //     value: 'ru' // 俄语标准代码
    // },
    {
        label: '中文',
        value: 'zh-CN' // 简体中文（中国大陆地区）标准代码，若需通用中文可设为'zh'
    },
    {
        label: 'Español',
        value: 'es' // 西班牙语标准代码
    }
    // {
    //     label: 'Português',
    //     value: 'pt' // 葡萄牙语标准代码（若需区分巴西葡语可设为'pt-BR'，欧洲葡语为'pt-PT'）
    // },
    // {
    //     label: 'ภาษาไทย',
    //     value: 'th' // 泰语标准代码
    // },
    // {
    //     label: 'Français',
    //     value: 'fr' // 法语标准代码
    // }
]);

//多语言确认
const handleConfirm = async (e: any) => {
    const index = e.detail.value;
    columnsIndex.value = index;
    const lang = columns.value[index].value;
    locale.value = lang;
    setStorage('lang', lang);
    memberStore.setDataInfo({
        lang
    });
    window.location.reload();
};

//开客服弹窗
const openService = () => {
    serviceRef.value.open('center');
};

//关闭服弹窗
const onClose = () => {
    serviceRef.value.close();
};
</script>
<style lang="scss" scoped></style>
